<template>
  <view class="promotion-detail-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-content">
        <text class="page-title">促销活动详情</text>
        <view class="header-actions">
          <button class="btn btn-primary" @click="navigateToEdit">
            <text>编辑</text>
          </button>
          <button class="btn btn-back" @click="handleBack">
            <text>返回</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 详情内容 -->
    <scroll-view v-else class="detail-scroll" scroll-y>
      <view class="detail-content">
        
        <!-- 基本信息卡片 -->
        <view class="detail-card">
          <view class="card-header">
            <text class="card-title">基本信息</text>
            <view :class="['status-badge', getStatusClass(promotion.status)]">
              {{ getStatusText(promotion.status) }}
            </view>
          </view>
          <view class="card-body">
            <view class="detail-row">
              <text class="label">活动标题</text>
              <text class="value">{{ promotion.title || '-' }}</text>
            </view>
            
            <view v-if="promotion.description" class="detail-row">
              <text class="label">活动描述</text>
              <text class="value">{{ promotion.description }}</text>
            </view>
            
            <view v-if="promotion.image" class="detail-row vertical">
              <text class="label">活动图片</text>
              <image 
                class="promotion-image" 
                :src="promotion.image" 
                mode="aspectFit"
                @click="previewImage(promotion.image)"
              />
            </view>
            
            <view v-if="promotion.content" class="detail-row vertical">
              <text class="label">活动详细内容</text>
              <view class="rich-content-wrapper">
                <rich-text :nodes="promotion.content" class="rich-content"></rich-text>
              </view>
            </view>
          </view>
        </view>

        <!-- 活动时间卡片 -->
        <view class="detail-card">
          <view class="card-header">
            <text class="card-title">活动时间</text>
          </view>
          <view class="card-body">
            <view class="detail-row">
              <text class="label">活动开始日期</text>
              <text class="value time-value">{{ promotion.start_date || '-' }}</text>
            </view>
            <view class="detail-row">
              <text class="label">活动结束日期</text>
              <text class="value time-value">{{ promotion.end_date || '-' }}</text>
            </view>
          </view>
        </view>

        <!-- 优惠配置卡片 -->
        <view class="detail-card">
          <view class="card-header">
            <text class="card-title">优惠配置</text>
          </view>
          <view class="card-body">
            <view class="detail-row">
              <text class="label">优惠类型</text>
              <text class="value highlight">{{ getDiscountTypeText(promotion.discount_type) }}</text>
            </view>
            <view class="detail-row">
              <text class="label">优惠值</text>
              <text class="value discount-value">
                {{ promotion.discount_value }}{{ promotion.discount_type === 1 ? '%' : '元' }}
              </text>
            </view>
            <view class="detail-row">
              <text class="label">最低消费金额</text>
              <text class="value">¥{{ promotion.min_amount || 0 }}</text>
            </view>
            <view class="detail-row">
              <text class="label">最高优惠金额</text>
              <text class="value">{{ promotion.max_discount_amount ? '¥' + promotion.max_discount_amount : '不限' }}</text>
            </view>
          </view>
        </view>

        <!-- 适用范围卡片 -->
        <view class="detail-card">
          <view class="card-header">
            <text class="card-title">适用范围</text>
          </view>
          <view class="card-body">
            <view class="detail-row">
              <text class="label">适用范围</text>
              <text 
                v-if="promotion.apply_scope === 1" 
                class="link-text" 
                @click="showItemsModal"
              >
                指定商品/服务 ({{ appliedItems.length }})
              </text>
              <text v-else class="value highlight">{{ getApplyScopeText(promotion.apply_scope) }}</text>
            </view>
            
            <view v-if="promotion.apply_scope === 2 && promotion.categories_text" class="detail-row">
              <text class="label">适用类别</text>
              <text class="value">{{ promotion.categories_text }}</text>
            </view>
          </view>
        </view>

        <!-- VIP奖励卡片 -->
        <view v-if="promotion.vip_reward_type && promotion.vip_reward_type > 0" class="detail-card">
          <view class="card-header">
            <text class="card-title">VIP奖励</text>
          </view>
          <view class="card-body">
            <view class="detail-row">
              <text class="label">奖励类型</text>
              <text class="value highlight">{{ promotion.vip_reward_type_text || '-' }}</text>
            </view>
            <view class="detail-row">
              <text class="label">奖励阈值</text>
              <text class="value">¥{{ promotion.vip_reward_threshold || 0 }}</text>
            </view>
            <view class="detail-row">
              <text class="label">VIP等级</text>
              <text class="value points-value">VIP{{ promotion.vip_reward_level || 0 }}</text>
            </view>
          </view>
        </view>

        <!-- 优先级和排序卡片 -->
        <view class="detail-card">
          <view class="card-header">
            <text class="card-title">其他设置</text>
          </view>
          <view class="card-body">
            <view class="detail-row">
              <text class="label">优先级</text>
              <text class="value">{{ promotion.priority || 0 }}</text>
            </view>
            <view class="detail-row">
              <text class="label">显示顺序</text>
              <text class="value">{{ promotion.display_order || 0 }}</text>
            </view>
            <view class="detail-row">
              <text class="label">创建时间</text>
              <text class="value time-value">{{ formatDateTime(promotion.create_time) }}</text>
            </view>
            <view class="detail-row">
              <text class="label">更新时间</text>
              <text class="value time-value">{{ formatDateTime(promotion.update_time) }}</text>
            </view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
          <button class="action-btn btn-delete" @click="handleDelete">
            <text>删除活动</text>
          </button>
        </view>

      </view>
    </scroll-view>
    
    <!-- 查看商品/服务弹窗 -->
    <view v-if="showModal" class="modal-overlay" @click="closeModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">查看已选商品/服务</text>
          <button class="modal-close-btn" @click="closeModal">×</button>
        </view>
        
        <view class="modal-tabs">
          <view 
            class="modal-tab" 
            :class="{ active: currentTab === 'service' }"
            @click="switchTab('service')"
          >
            <text class="tab-text">服务</text>
            <text class="tab-count">({{ serviceItems.length }})</text>
          </view>
          <view 
            class="modal-tab" 
            :class="{ active: currentTab === 'product' }"
            @click="switchTab('product')"
          >
            <text class="tab-text">商品</text>
            <text class="tab-count">({{ productItems.length }})</text>
          </view>
        </view>
        
        <scroll-view class="modal-list" scroll-y>
          <view v-if="currentTabItems.length === 0" class="empty-state">
            <text class="empty-text">暂无{{ currentTab === 'service' ? '服务' : '商品' }}数据</text>
          </view>
          
          <view v-else>
            <view 
              v-for="item in currentTabItems" 
              :key="item._id" 
              class="modal-item"
            >
              <view class="modal-item-info">
                <view class="modal-item-name">{{ item.name }}</view>
                <view class="modal-item-price">¥{{ item.price }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
        
        <view class="modal-footer">
          <button class="modal-btn modal-btn-primary" @click="closeModal">关闭</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'

const db = uniCloud.database()
const dhPromotions = uniCloud.importObject('dh-hospital_promotions')

const loading = ref(true)
const promotionId = ref('')
const promotion = reactive({
  title: '',
  description: '',
  image: '',
  content: '',
  start_date: '',
  end_date: '',
  discount_type: 1,
  discount_value: 0,
  min_amount: 0,
  max_discount_amount: 0,
  apply_scope: 3,
  apply_target_ids: [],
  priority: 0,
  display_order: 0,
  status: 1,
  vip_reward_type: 0,
  vip_reward_threshold: 0,
  vip_reward_level: 0,
  create_time: null,
  update_time: null
})

const appliedItems = ref([])
const showModal = ref(false)
const currentTab = ref('service')

// 计算属性：服务列表
const serviceItems = computed(() => {
  return appliedItems.value.filter(item => item.type === 'service')
})

// 计算属性：商品列表
const productItems = computed(() => {
  return appliedItems.value.filter(item => item.type === 'product')
})

// 计算属性：当前标签页的项目列表
const currentTabItems = computed(() => {
  return currentTab.value === 'service' ? serviceItems.value : productItems.value
})

onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  promotionId.value = currentPage.options.id || ''
  
  if (promotionId.value) {
    loadData()
  } else {
    uni.showToast({
      title: '缺少促销活动ID',
      icon: 'none'
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }
})

/**
 * 加载促销详情数据
 */
async function loadData() {
  loading.value = true
  try {
    const res = await dhPromotions.getPromotionById(promotionId.value)
    
    if (res.code === 200 && res.data) {
      Object.assign(promotion, res.data)
      
      // 如果是指定商品/服务，加载商品/服务详情
      if (promotion.apply_scope === 1 && promotion.apply_target_ids && promotion.apply_target_ids.length > 0) {
        await loadAppliedItems()
      }
    } else {
      uni.showToast({
        title: res.message || '加载失败',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  } catch (err) {
    console.error('加载促销详情失败:', err)
    uni.showToast({
      title: err.message || '加载失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

/**
 * 加载指定的商品/服务详情
 */
async function loadAppliedItems() {
  try {
    const ids = promotion.apply_target_ids || []
    console.log('开始加载商品/服务详情，ID列表:', ids)
    
    if (ids.length === 0) {
      console.log('ID列表为空，跳过加载')
      return
    }
    
    const items = []
    
    // 查询服务（尝试通过 _id 或 service_code 查询）
    try {
      // 先尝试通过 _id 查询
      let servicesRes = await db.collection('dh-services')
        .where({
          _id: db.command.in(ids)
        })
        .field({
          _id: true,
          service_name: true,
          base_price: true,
          service_code: true
        })
        .get()
      
      console.log('服务查询结果（通过_id）:', servicesRes)
      
      // 获取实际数据（兼容客户端和服务端响应格式）
      let servicesData = servicesRes.result?.data || servicesRes.data || []
      
      // 如果通过 _id 没找到，尝试通过 service_code 查询
      if (servicesData.length === 0) {
        servicesRes = await db.collection('dh-services')
          .where({
            service_code: db.command.in(ids)
          })
          .field({
            _id: true,
            service_name: true,
            base_price: true,
            service_code: true
          })
          .get()
        
        console.log('服务查询结果（通过service_code）:', servicesRes)
        servicesData = servicesRes.result?.data || servicesRes.data || []
      }
      
      if (servicesData.length > 0) {
        servicesData.forEach(service => {
          items.push({
            _id: service._id,
            name: service.service_name,
            price: service.base_price,
            type: 'service'
          })
        })
        console.log('已添加服务:', servicesData.length, '项')
      } else {
        console.log('未找到匹配的服务')
      }
    } catch (serviceErr) {
      console.error('查询服务失败:', serviceErr)
    }
    
    // 查询商品（尝试通过 _id 或 product_code 查询）
    try {
      // 先尝试通过 _id 查询
      let productsRes = await db.collection('dh-products')
        .where({
          _id: db.command.in(ids)
        })
        .field({
          _id: true,
          product_name: true,
          price: true,
          product_code: true
        })
        .get()
      
      console.log('商品查询结果（通过_id）:', productsRes)
      
      // 获取实际数据（兼容客户端和服务端响应格式）
      let productsData = productsRes.result?.data || productsRes.data || []
      
      // 如果通过 _id 没找到，尝试通过 product_code 查询
      if (productsData.length === 0) {
        productsRes = await db.collection('dh-products')
          .where({
            product_code: db.command.in(ids)
          })
          .field({
            _id: true,
            product_name: true,
            price: true,
            product_code: true
          })
          .get()
        
        console.log('商品查询结果（通过product_code）:', productsRes)
        productsData = productsRes.result?.data || productsRes.data || []
      }
      
      if (productsData.length > 0) {
        productsData.forEach(product => {
          items.push({
            _id: product._id,
            name: product.product_name,
            price: product.price,
            type: 'product'
          })
        })
        console.log('已添加商品:', productsData.length, '项')
      } else {
        console.log('未找到匹配的商品')
      }
    } catch (productErr) {
      console.error('查询商品失败:', productErr)
    }
    
    appliedItems.value = items
    console.log('最终加载的商品/服务总数:', items.length)
    console.log('详细列表:', items)
  } catch (err) {
    console.error('加载商品/服务详情失败:', err)
  }
}

/**
 * 格式化日期时间
 */
function formatDateTime(timestamp) {
  if (!timestamp) return '-'
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hour = String(date.getHours()).padStart(2, '0')
  const minute = String(date.getMinutes()).padStart(2, '0')
  const second = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}

/**
 * 获取状态文本
 */
function getStatusText(status) {
  const statusMap = {
    1: '启用',
    2: '停用',
    3: '已过期'
  }
  return statusMap[status] || '未知'
}

/**
 * 获取状态样式类
 */
function getStatusClass(status) {
  const classMap = {
    1: 'status-active',
    2: 'status-inactive',
    3: 'status-expired'
  }
  return classMap[status] || ''
}

/**
 * 获取优惠类型文本
 */
function getDiscountTypeText(type) {
  const typeMap = {
    1: '百分比折扣',
    2: '固定金额减免'
  }
  return typeMap[type] || '未知'
}

/**
 * 获取适用范围文本
 */
function getApplyScopeText(scope) {
  const scopeMap = {
    1: '指定商品/服务',
    2: '指定类别',
    3: '全场'
  }
  return scopeMap[scope] || '未知'
}

/**
 * 预览图片
 */
function previewImage(url) {
  if (!url) return
  uni.previewImage({
    urls: [url],
    current: url
  })
}

/**
 * 跳转到编辑页面
 */
function navigateToEdit() {
  uni.navigateTo({
    url: `/pages/business/hospital_promotions/edit?id=${promotionId.value}`
  })
}

/**
 * 删除促销活动
 */
function handleDelete() {
  uni.showModal({
    title: '确认删除',
    content: '确定要删除这个促销活动吗？删除后无法恢复！',
    confirmColor: '#dc3545',
    success: async (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({ title: '删除中...' })
          
          const result = await dhPromotions.deletePromotion(promotionId.value)
          
          uni.hideLoading()
          
          if (result.code === 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
            setTimeout(() => {
              uni.redirectTo({
                url: '/pages/business/hospital_promotions/list'
              })
            }, 1500)
          } else {
            uni.showToast({
              title: result.message || '删除失败',
              icon: 'none'
            })
          }
        } catch (err) {
          uni.hideLoading()
          console.error('删除失败:', err)
          uni.showToast({
            title: err.message || '删除失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

/**
 * 返回列表页
 */
function handleBack() {
  uni.redirectTo({
    url: '/pages/business/hospital_promotions/list'
  })
}

/**
 * 显示商品/服务弹窗
 */
function showItemsModal() {
  // 根据有哪些数据，默认显示第一个有数据的标签页
  if (serviceItems.value.length > 0) {
    currentTab.value = 'service'
  } else if (productItems.value.length > 0) {
    currentTab.value = 'product'
  } else {
    // 如果都没有数据，默认显示服务标签
    currentTab.value = 'service'
  }
  
  showModal.value = true
}

/**
 * 关闭弹窗
 */
function closeModal() {
  showModal.value = false
}

/**
 * 切换标签页
 */
function switchTab(tab) {
  currentTab.value = tab
}
</script>

<style lang="scss" scoped>
.promotion-detail-page {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* ==================== 页面头部 ==================== */
.page-header {
  background: #fff;
  padding: 30rpx 40rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1rpx solid #e0e0e0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.header-actions {
  display: flex;
  gap: 20rpx;
}

.btn {
  display: flex;
  align-items: center;
  gap: 10rpx;
  padding: 16rpx 28rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: 1rpx solid #e0e0e0;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
  color: #333;
}

.btn-primary {
  background: #007aff;
  color: #fff;
  border-color: #007aff;
  
  &:active {
    opacity: 0.8;
  }
}

.btn-back {
  background: #fff;
  color: #333;
  border-color: #e0e0e0;
  
  &:active {
    background: #f5f5f5;
  }
}

.btn-icon {
  font-size: 28rpx;
}

/* ==================== 加载状态 ==================== */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.loading-spinner {
  width: 80rpx;
  height: 80rpx;
  border: 6rpx solid #e0e0e0;
  border-top-color: #007aff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text {
  margin-top: 30rpx;
  font-size: 28rpx;
  color: #666;
}

/* ==================== 详情内容 ==================== */
.detail-scroll {
  flex: 1;
  overflow-y: auto;
}

.detail-content {
  padding: 30rpx;
}

/* ==================== 详情卡片 ==================== */
.detail-card {
  background: #fff;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 35rpx;
  background: #fafafa;
  border-bottom: 1rpx solid #e0e0e0;
}

.card-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.card-body {
  padding: 20rpx 35rpx 35rpx;
}

/* ==================== 详情行 ==================== */
.detail-row {
  display: flex;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
  
  &.vertical {
    flex-direction: column;
    align-items: flex-start;
  }
}

.label {
  min-width: 280rpx;
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
  margin-bottom: 10rpx;
  
  .detail-row:not(.vertical) & {
    margin-bottom: 0;
  }
}

.value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  word-break: break-all;
}

.time-value {
  color: #667eea;
  font-family: 'Courier New', monospace;
}

.discount-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #f5576c;
}

.points-value {
  font-weight: bold;
  color: #f093fb;
}

.highlight {
  font-weight: bold;
  color: #667eea;
}

/* ==================== 状态标签 ==================== */
.status-badge {
  padding: 8rpx 20rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
}

.status-active {
  background: #e8f5e9;
  color: #2e7d32;
}

.status-inactive {
  background: #fff3e0;
  color: #e65100;
}

.status-expired {
  background: #f5f5f5;
  color: #757575;
}

/* ==================== 活动图片 ==================== */
.promotion-image {
  width: 100%;
  max-width: 600rpx;
  height: 400rpx;
  border-radius: 15rpx;
  margin-top: 15rpx;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
  }
}

/* ==================== 富文本内容 ==================== */
.rich-content-wrapper {
  width: 100%;
  margin-top: 15rpx;
  padding: 30rpx;
  background: #f8f9fa;
  border-radius: 15rpx;
  border: 2rpx solid #e9ecef;
}

.rich-content {
  font-size: 28rpx;
  line-height: 1.8;
  color: #333;
}

/* ==================== 操作按钮 ==================== */
.action-buttons {
  margin-top: 20rpx;
  padding: 0 10rpx 30rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15rpx;
  width: 100%;
  padding: 28rpx;
  border-radius: 8rpx;
  font-size: 30rpx;
  border: 1rpx solid #e0e0e0;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
  color: #333;
}

.btn-delete {
  background: #ff3b30;
  color: #fff;
  border-color: #ff3b30;
  
  &:active {
    opacity: 0.8;
  }
}

/* ==================== 链接文字 ==================== */
.link-text {
  flex: 1;
  font-size: 28rpx;
  color: #667eea !important;
  cursor: pointer;
  text-decoration: underline;
  transition: all 0.3s ease;
  
  &:hover {
    color: #5568d3 !important;
  }
  
  &:active {
    opacity: 0.7;
  }
}

.view-icon {
  font-size: 28rpx;
  margin-left: 5rpx;
}

/* ==================== 弹窗 ==================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content {
  width: 90%;
  max-width: 800rpx;
  max-height: 80vh;
  background: #fff;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 35rpx;
  background: #fafafa;
  border-bottom: 1rpx solid #e0e0e0;
}

.modal-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.modal-close-btn {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 48rpx;
  color: #999;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.3s ease;
  
  &:hover {
    color: #333;
  }
  
  &:active {
    opacity: 0.7;
  }
}

.modal-tabs {
  display: flex;
  background: #fff;
  border-bottom: 1rpx solid #e0e0e0;
}

.modal-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  padding: 25rpx 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  background: #fafafa;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rpx;
    background: transparent;
    transition: all 0.3s ease;
  }
  
  &.active {
    background: #fff;
    
    .tab-text {
      color: #007aff;
      font-weight: bold;
    }
    
    .tab-count {
      color: #007aff;
      background: #e3f2fd;
    }
    
    &::after {
      background: #007aff;
    }
  }
}

.tab-text {
  font-size: 28rpx;
  color: #666;
  transition: all 0.3s ease;
}

.tab-count {
  font-size: 24rpx;
  color: #999;
  background: #f5f5f5;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.modal-list {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
}

.empty-icon {
  font-size: 120rpx;
  margin-bottom: 20rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.modal-item {
  background: #fafafa;
  border-radius: 8rpx;
  padding: 25rpx;
  margin-bottom: 15rpx;
  border: 1rpx solid #e0e0e0;
  transition: all 0.3s ease;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.modal-item-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-item-name {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  margin-right: 20rpx;
}

.modal-item-price {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff3b30;
}

.modal-footer {
  padding: 25rpx 35rpx;
  background: #fafafa;
  border-top: 1rpx solid #e0e0e0;
}

.modal-btn {
  width: 100%;
  padding: 25rpx;
  border-radius: 8rpx;
  font-size: 30rpx;
  border: 1rpx solid #e0e0e0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.modal-btn-primary {
  background: #007aff;
  color: #fff;
  border-color: #007aff;
  
  &:active {
    opacity: 0.8;
  }
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 768px) {
  .page-header {
    padding: 25rpx 30rpx;
  }
  
  .page-title {
    font-size: 36rpx;
  }
  
  .btn {
    padding: 14rpx 24rpx;
    font-size: 26rpx;
  }
  
  .detail-content {
    padding: 20rpx;
  }
  
  .detail-card {
    margin-bottom: 25rpx;
  }
  
  .card-header {
    padding: 25rpx 30rpx;
  }
  
  .card-title {
    font-size: 30rpx;
  }
  
  .card-body {
    padding: 15rpx 30rpx 30rpx;
  }
  
  .label {
    min-width: 240rpx;
    font-size: 26rpx;
  }
  
  .value {
    font-size: 26rpx;
  }
  
  .promotion-image {
    height: 350rpx;
  }
  
  .modal-content {
    width: 95%;
    max-height: 85vh;
  }
  
  .modal-header {
    padding: 25rpx 30rpx;
  }
  
  .modal-title {
    font-size: 30rpx;
  }
  
  .modal-tab {
    padding: 20rpx 15rpx;
  }
  
  .tab-text {
    font-size: 26rpx;
  }
  
  .tab-count {
    font-size: 22rpx;
  }
  
  .modal-item {
    padding: 20rpx;
  }
  
  .modal-item-name {
    font-size: 26rpx;
  }
  
  .modal-item-price {
    font-size: 28rpx;
  }
  
  .link-text {
    font-size: 26rpx;
  }
  
  .view-icon {
    font-size: 26rpx;
  }
}
</style>

